<template>
	<!-- 求购信息详情页 -->
	<view class="app">
		<!-- 吸顶搜索栏 -->
		<view class="top-bar sticky-tabs">
			<u-icon class="icon" name="arrow-left" color="#eee" size="64" @click="vk.navigateBack"></u-icon>
			<view class="search-bar">
				<u-search placeholder="求购信息搜索" v-model="keyword" :show-action="false" shape="square" @search="search"></u-search>
			</view>
			<u-icon class="icon" name="more-dot-fill" color="#eee" size="64"
				@click="toMore()"></u-icon>
		</view>
		<!-- 详情 -->
		<view class="main">
			<view class="banner-bar">
				<u-swiper :list="formData.images.split(',')" height="600" :title="false" img-mode="aspectFit"
					:autoplay="false" mode="none" @click="preview"></u-swiper>
			</view>
			
			<view class="section">
				<view class="title">{{formData.title}}</view>
				<view class="text2 row">
					<view class="row">
						<u-icon class="icon" name="clock" color="#333" size="18" @click=""></u-icon>
						{{formData.publish_time_str.substr(0, 10)}}
					</view>
					<view class="row row-end">
						<u-icon class="icon" name="eye" color="#333" size="24" @click=""></u-icon>
						{{formData.pv}}
					</view>
				</view>
			</view>
			
			<view class="section">
				<view class="row">数量：{{formData.quantity}}</view>
				<view class="row">价格：{{formData.price}}</view>
				<view class="row">包装：{{formData.packing}}</view>
				<view class="btn-bar">
					<u-button type="success" @click="buy">发送报价</u-button>
				</view>
			</view>
			<view class="section">
				<view class="row">采购数量：{{formData.quantity2}}</view>
				<view class="row">期望货源地：{{formData.origin}}</view>
				<view class="row">收货地：{{formData.receiver_address}}</view>
			</view>
			<view class="section">
				<u-parse :html="formData.content"></u-parse>
			</view>
			
			<!-- 操作栏 -->
			<operate-bar :data="formData" nav="purchase"></operate-bar>
			
			<!-- 联系方式 -->
			<view class="section">
				<view class="section-title-bar">
					<u-section title="联系方式" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						:right="false"></u-section>
				</view>
				<view class="grid-bar">
					<view class="grid-item4" @click="contact(1)">
						<u-icon name="chat" color="#fff" size="84"/>
						<view class="">在线交谈</view>
					</view>
					<view class="grid-item4" @click="contact(2)">
						<u-icon name="email" color="#fff" size="84"/>
						<view class="">发送信件</view>
					</view>
					<view class="grid-item4" @click="contact(99)">
						<u-icon name="more-dot-fill" color="#fff" size="84"/>
						<view class="">更多</view>
					</view>
				</view>
			</view>
			
			<!-- 数据列表 -->
			<view class="section">
				<view class="imglist-bar">
					<view class="imglist-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
						<view class="thumb">
							<image class="" :src="item.images" mode=""></image>
						</view>
						<view class="text-bar">
							<text class="title common-text common-text-row2">{{item.title}}</text>
							<text class="text2">{{item._create_by}}</text>
							<view class="text2 row">
								<view class="row">
									<u-icon class="icon" name="clock" color="#999" size="36" @click=""></u-icon>
									{{item.publish_time_str.substr(0, 10)}}
								</view>
								<view class="row row-end">
									<u-icon class="icon" name="chat" color="#999" size="36" @click=""></u-icon>
									<view class="noc">{{item.num_baojia}}报价</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import PURCHASE from "@/data/purchase.js";

	export default {
		data() {
			return {
				id: null,
				keyword: '',
				
				formData: {},
				dataList: [],
				
				scrollTop: 0, // 返回顶部
				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				sectionColor: this.$css.sectionColor,
				sectionLineColor: this.$css.sectionLineColor,
			}
		},
		onLoad(options = {}) {
			this.initPage(options)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			initPage(options = {}) {
				if(!options.id) return
				
				this.id = options.id;
				this.getData();
				this.getDataList();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			search(){
				if (config.debug) console.log('搜索', this.keyword)
				vk.toast('搜索' + this.keyword);
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			toDetail(id) {
				this.pageTo(`./detail?id=${id}`)
			},
			getData(){
				this.formData = PURCHASE.find(item => item.id == this.id);
				uni.setNavigationBarTitle({
					title: this.formData.category_name
				})
			},
			getDataList(){
				this.dataList = vk.pubfn.copyObject(PURCHASE).filter((item, index) => index < 10);
			},
			contact(id){
				vk.toast('点击了联系方式' + id);
			},
			buy(){
				vk.toast('点击了发送报价');
			},
			preview(){
				vk.toast('点击了图片');
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
	}
</script>

<style lang="scss">
	.app {
		
	}
	
	.banner-bar{
		height: 600rpx;
	}
	
	.section{
		padding: 0 30rpx;
		background-color: #fff;
	}

	.section>.title {
		margin: 50rpx 0;
		font-size: 24px;
		font-weight: 700;
		// text-align: center;
	}
	
	.grid-item4{
		height: calc((100vw - 15px) / 4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.grid-bar .u-icon{
		padding: 10rpx;
		border-radius: 20rpx;
	}
	.grid-bar .grid-item4:nth-child(1) .u-icon{
		background-color: limegreen;
	}
	.grid-bar .grid-item4:nth-child(2) .u-icon{
		background-color: royalblue;
	}
	.grid-bar .grid-item4:nth-child(3) .u-icon{
		background-color: springgreen;
	}
	.grid-bar .grid-item4:nth-child(4) .u-icon{
		background-color: orange;
	}
	.grid-bar .grid-item4:last-child .u-icon{
		background-color: green;
	}
</style>